<template>
<view class="container">
  <view class="header">
    <image class="bg" :src="$Config.get('imageUrl')+'/data/head.png'" mode="scaleToFill"/>
    <view class="content">
      <view class="left">
        <view class="p1">{{ stat.shareAmount }}</view>
        <view class="p2">我的股权份额</view>
      </view>
      <view class="right">
        <view class="p1">可兑换份额<span>{{ stat.availableShareAmount }}</span></view>
        <view class="p2">兑换比例<span>10:1</span></view>
      </view>
    </view>
  </view>
  <view class="onbind" @click="goBind" v-if="bindEmail==''">
    <view class="left">请先绑定账号</view>
    <view class="right">去绑定</view>
  </view>
  <view class="bind" v-else>
    我的绑定账号:&nbsp;{{bindEmail}}
  </view>
  <view class="title">
    <span>兑换数量</span>
    <span class="right" @click="golist">
      兑换记录
      <text class="iconfont icon-right"></text>
    </span>
  </view>
  <view class="b-input">
    <input class="input" v-model="value" placeholder="请输入兑换数量" />
    <view class="tip">可兑换份额{{ stat.availableShareAmount }}</view>
  </view>
  <u-slider v-model="value" :min="0" :max="stat.availableShareAmount"></u-slider>
  <view class="title1">
    可释放数量
    <span>
      10份股权兑换1个BPW
    </span>
  </view>
  <view class="b-input">
    <input class="input" disabled :value="stat.availableShareAmount" placeholder="请输入兑换数量" />
    <view class="tip black">个BPW</view>
  </view>
  <view class="title1">
    已释放数量
  </view>
  <view class="b-input">
    <input class="input" disabled :value="stat.usedShareAmount" placeholder="请输入兑换数量" />
    <view class="tip black">个BPW</view>
  </view>
  <view class="title1">
    未释放数量
  </view>
  <view class="b-input">
    <input class="input" disabled :value="stat.lockedShareAmount" placeholder="请输入兑换数量" />
    <view class="tip black">个BPW</view>
  </view>
  <view class="tips">
    （*兑换方式：线性释放。释放的公式：每天释放的量=总量/总释放天数。总释放时间=360天）
  </view>
  <view class="btn" :class="{ disabled }" @click="submit">
    立即兑换
  </view>
</view>
</template>

<script>
import { getUserStat,numTimes } from '@/core/app'
export default {
  data() {
    return {
      value: 0,
      bindEmail: '',
      disabled:false,
      stat:{
        usedShareAmount:0,
        shareAmount:0,
        shareRate:0,
        availableShareAmount:0,
        lockedShareAmount:0,
      },
    }
  },
  onShow(){
    const stat = getUserStat();
    this.stat.usedShareAmount = stat.usedShareAmount || 0;
    this.stat.shareAmount = stat.shareAmount;
    this.stat.shareRate = stat.shareRate;
    this.stat.availableShareAmount = stat.availableShareAmount;
    this.stat.lockedShareAmount = stat.lockedShareAmount;

    this.getBindEmail()
  },
  methods: {
    getBindEmail(){
      this.$request.get('wx/auth/getBindedThirdAcct',{},{load:true}).then(res=>{
        if(res.data.email) this.bindEmail = res.data.email;
      }).catch(err=>{
        this.bindEmail = '';
      })
    },
    submit(){
      const app = this


      app.$toast('等待开放');
      return


      if(app.bindEmail == ''){
        app.$toast('请先绑定账号')
        return false
      }
      if (app.disabled) {
        return false
      }
      if(app.value == 0){
        app.$toast('请输入兑换数量')
        return false
      }
      app.disabled = true;
      const params = {
        applyNum:app.value,
      }
      this.$request.post('wx/share/apply',params).then(result => {
        app.$toast(result.errmsg)
        uni.navigateBack();
      }).catch(err=>{
        app.$toast(err.errmsg)
      }).finally(() => app.disabled = false)
    },
    golist() {
      uni.navigateTo({
        url: '/page_work/user/exchangeList'
      })
    },
    goBind() {
      uni.navigateTo({
        url: '/page_work/user/bindThirdAcct'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 20rpx 40rpx;
  background: #F7F7F7;
  .header{
    height: 220rpx;
    border-radius: 26rpx 26rpx 0 0;
    color: #FFF;
    position: relative;
    overflow: hidden;
    .content{
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap:80rpx;
      .left{
        text-align: center;
        color: #FFFFFF;
        position: relative;
        .p1{
          font-size: 48rpx;
          font-weight: bold;
        }
        .p2{
          margin-top: 14rpx;
          font-size: 28rpx;
          font-weight: 500;
        }
        &:before{
          content: '';
          position: absolute;
          top: 50%;
          right: -40rpx;
          width: 2rpx;
          height: 60rpx;
          background: rgba(255, 255, 255, 0.12);
          transform: translateY(-50%);
        }
      }
      .right{
        .p1{
          font-size: 32rpx;
          font-weight: 500;
          span{
            font-size: 40rpx;
            font-weight: bold;
            margin-left: 20rpx;
          }
        }
        .p2{
          margin-top: 10rpx;
          font-size: 32rpx;
          font-weight: 500;
          span{
            font-size: 44rpx;
            font-weight: bold;
            margin-left: 20rpx;
          }
        }
      }
    }
    .bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
  }
  .onbind{
    margin-top: 30rpx;
    border-radius: 10rpx;
    background: #FFF;
    padding: 20rpx 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      font-size: 32rpx;
      font-weight: 400;
      color: #1777FF;
    }
    .right{
      font-size: 24rpx;
      font-weight: bold;
      color: #1777FF;
      border: solid 1px #1777FF;
      padding: 10rpx 20rpx;
      border-radius: 40rpx;
    }
  }
  .bind{
    margin-top: 30rpx;
    border-radius: 10rpx;
    background: #FFF;
    padding: 20rpx 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #1777FF;
  }
  .title{
    margin-top:40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    font-weight: 400;
    color: #010812;
    .right{
      font-size: 28rpx;
      font-weight: 400;
      color: #1777FF;
      display: flex;
      align-items: center;
      gap:10rpx;
      .iconfont{
        font-weight: bold;
        font-size: 24rpx;
      }
    }
  }
  .b-input{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 5px;
    border: 1px solid #E5E6EB;
    padding: 20rpx;
    height: 92rpx;
    box-sizing: border-box;
    gap:20rpx;
    margin-top: 10rpx;
    .input{
      flex: 1;
      font-size: 32rpx;
      font-weight: 400;
      color: #000000;
    }
    .tip{
      font-size: 28rpx;
      font-weight: 400;
      color: #A8A5A5;
    }
  }
  .title1{
    margin-top:40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #989898;
    span{
      margin-left: 20rpx;
      font-size: 20rpx;
      color: #999999;
    }
  }
  .black{
    color: #2E3138 !important
  }
  .tips{
    font-size: 28rpx;
    font-weight: 400;
    color: #6F6F6F;
    margin-top: 32rpx;
  }
  .btn{
    margin-top: 60rpx;
    height: 88rpx;
    border-radius: 20rpx;
    background: #1777FF;
    color: #FFF;
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .disabled{
    opacity: 0.6;
  }
}
</style>